<template>
  <div style="text-align: start; background-color: white;">
    <el-button type="primary" style="margin: 20px;" @click="openAddDialog">添加分类</el-button>
    <el-button type="warning" style="margin: 20px;" @click="clearTreeSelector">清空选中</el-button>
    <el-button type="infor" style="margin: 20px;" @click="selectguiges">设置规格</el-button>
    <el-tree
    ref="mytree"
    :data="data"
    :props="defaultProps"
    node-key="id"
    default-expand-all="true"
    @node-click="handleNodeClick"></el-tree>


    <!-- 添加分类的弹窗 -->
    <el-dialog
      title="添加分类"
      :visible.sync="dialog.dialogVisible"
      width="30%">

        <div style="margin: 20px;">
          <div style="margin-bottom: 10px;">
            父级分类:  {{pnode.pname}}
          </div>
          <div>
            分类名称: <el-input placeholder="请输入分类名称" style="width: 50%;" v-model="form.tname"></el-input>
          </div>
        </div>

        <el-button type="success" @click="insertCourseType">添加</el-button>
    </el-dialog>


    <!-- 设置规格的弹窗 -->
    <el-dialog
      title="设置规格"
      :visible.sync="dialog.dialogVisible2"
      width="45%">

      <el-transfer
        :props="{
          key: 'id',
          label: 'gname'
        }"
        v-model="guiges.value"
        :data="guiges.data"
        :titles="['所有规格', '选中规格']"></el-transfer>

      <el-button type="success" style="margin-top: 20px;" @click="selectTypeGuige">确定</el-button>

    </el-dialog>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          data: [],
          guiges: {
            data: [],
            value: []
          },
          pnode: {
            pname: "没有父分类"
          },
          form: {
            pid: null,
            tname: ""
          },
          guigeForm: {
            tid: null
          },
          dialog: {
            dialogVisible: false,
            dialogVisible2: false
          },
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        };
      },
      methods: {
        handleNodeClick(data) {
          console.log(data);
        },
        //查询课程分类列表 - 树形结构
        queryCourseTypeTree(){
          this.$.ajax({
            url: "/course/type/treeList",
            success: (data) => {
              this.data = data;
            }
          });
        },
        //打开添加分类的弹出框
        openAddDialog(){
           //获得树形结构的选中的节点
           var node = this.$refs.mytree.getCurrentNode();
           if(node){

             if(node.level == 3) {
               this.$message.error("三级分类无法添加子分类！");
               return;
             }

             this.pnode.pname = node.label;
             this.form.pid = node.id;
           } else {
             this.pnode.pname = "没有父分类";
             this.form.pid = null;
           }

           //打开dialog
           this.dialog.dialogVisible = true;
        },
        //清空选中
        clearTreeSelector(){
            this.$refs.mytree.setCurrentKey(null);
        },
        //新增课程分类
        insertCourseType(){
            this.$.ajax({
              type: "POST",
              url: "/course/type/insert",
              data: this.form,
              success: (data) => {
                this.$message.success("分类添加成功！");
                this.dialog.dialogVisible = false;
                this.queryCourseTypeTree();
              }
            });
        },
        //弹出规格选择的弹出框
        selectguiges(){
          //获得被选中的节点
          var node = this.$refs.mytree.getCurrentNode();
          if(!node || node.level != 3){
            this.$message.error("必须选中一个三级分类，才可以设置规格！");
            return;
          }

          //选择的分类id
          this.guigeForm.tid = node.id;

          //弹出框
          this.dialog.dialogVisible2 = true;

          //查询所有的规格列表
          this.$.ajax({
            url: "/course/guige/list",
            success: (data) => {
               this.guiges.data = data;
            }
          });

          //查询所有当前分类已经被选中的规格列表
          this.$.ajax({
            url: "/course/type/guigeSelected",
            data: {
              tid: this.guigeForm.tid
            },
            success: (data) => {
               this.guiges.value = data;
            }
          });
        },
        //提交课程分类 和规格的关联关系
        selectTypeGuige(){
          //课程分类的id
          //被选中的规格id列表
          console.log("分类id:" + this.guigeForm.tid + " 规格id列表：" + JSON.stringify(this.guiges.value));

          //ajax提交给后端
          this.$.ajax({
            type: "POST",
            url: "/course/type/updateGuiges",
            data: {
              tid: this.guigeForm.tid,
              gids: this.guiges.value
            },
            success: (data) => {
              this.$message.success("设置规格成功！");
              //关闭弹窗
              this.dialog.dialogVisible2 = false;
            }
          });
        }
      },
      mounted() {
        this.queryCourseTypeTree();
      }
    };
</script>

<style>
</style>
